﻿import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12

import "../components"

Rectangle {

    id: root
    // public =========================================================================
    property real pannelSize: root.width - 40*dp
    property real sliderHeight: 15*dp
    signal colorChanged(color c)
    function setColor(c){
        var res = rgb2hsv(c.r, c.g, c.b)
        hSlider.posi = res[0]
        sSlider.posi = res[1]
        vSlider.posi = res[2]
        updateColor()
    }

    // private =========================================================================
    property color pannelColor: "#1677FF"
    property color sColor: "#1677FF"
    property color vColor: "#1677FF"

    Component.onCompleted: {
        updateColor()
    }

    function updateColor(){
        var h = hSlider.posi * 360
        var s = sSlider.posi
        var v = vSlider.posi
        pannelColor = hsv2rgb(h, s, v)
        sColor = hsv2rgb(h, 1, v)
        vColor = hsv2rgb(h, s, 1)
    }

    function hsv2rgb(h, s, v){      // 返回color
        var c = v * s
        var x = c * (1 - Math.abs(h/60%2-1))
        var m = v - c
        var r, g, b
        if      (0<=h  && h<60){
            r = c; g = x; b = 0
        }else if(60<=h && h<120){
            r = x; g = c; b = 0
        }else if(120<=h && h<180){
            r = 0; g = c; b = x
        }else if(180<=h && h<240){
            r = 0; g = x; b = c
        }else if(240<=h && h<300){
            r = x; g = 0; b = c
        }else if(300<=h && h<=360){
            r = c; g = 0; b = x
        }
        r = r + m
        g = g + m
        b = b + m
        return Qt.rgba(r, g, b, 1)
    }

    function rgb2hsv(r, g, b) {     // 返回[h, s, v]
        var max = Math.max(r, g, b);
        var min = Math.min(r, g, b);
        var delta = max - min;

        var h = 0;
        var s = 0;
        var v = max;

        // 计算饱和度
        if (max !== 0) {
            s = delta / max;
        }

        // 计算色调
        if (delta !== 0) {
            if (max === r) {
                h = (g - b) / delta + (g < b ? 6 : 0);
            } else if (max === g) {
                h = (b - r) / delta + 2;
            } else if (max === b) {
                h = (r - g) / delta + 4;
            }
            h /= 6;
        }

        return [h, s, v];
    }


    // 样式 ===============================================================
    height: 180*dp
    width: 280*dp
    radius: 3
    color: "#FAFAFA"
    Column{
        x: 20*dp
        y: 20*dp
        spacing: 20*dp

        Item{
            height: 30*dp
            width: root.width-40*dp;
            Rectangle{
                id: resColor
                height: 20*dp; width: 40*dp
                y: 5*dp
                color: pannelColor
                Item{
                    height: 20*dp
                    width: 50*dp
                    x: 60*dp
                    Text{
                        font.pixelSize: config.fontsize
//                        text: pannelColor.toString()
                        anchors.centerIn: parent
                    }
                }
            }PushButton{
                title: "应用"
                x: parent.width - 100*dp
                height: 30*dp;  width: 100*dp
                button_color: "#FAFAFA"
                button_border: "#BBBBBB"
                onReleased: {
                    colorChanged(pannelColor)
                }
            }
        }

        Rectangle{
            id: hSlider
            height: sliderHeight
            width: pannelSize
            property double posi: 0.6
            Image{
                anchors.fill: parent
                source: "qrc:/picture/colorPannel2.png"
            }
            MouseArea{
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onPressed: {
                    var mousePos = mapToItem(hSlider, mouseX, mouseY)
                    hSlider.posi = mousePos.x / pannelSize
                    hSlider.posi = Math.max(0, hSlider.posi)
                    hSlider.posi = Math.min(1, hSlider.posi)
                    updateColor()
                }onPositionChanged: {
                    var mousePos = mapToItem(hSlider, mouseX, mouseY)
                    hSlider.posi = mousePos.x / pannelSize
                    hSlider.posi = Math.max(0, hSlider.posi)
                    hSlider.posi = Math.min(1, hSlider.posi)
                    updateColor()
                }
            }
            Rectangle{
                height: sliderHeight + 4*dp
                width: 5*dp
                y: -2*dp; x: hSlider.posi*pannelSize - 2
                border.color: "#CCCCCC"
            }
        }

        Rectangle{
            id: sSlider
            height: sliderHeight
            width: pannelSize
            property real posi: 0.9
            LinearGradient {            ///--[Mark]
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(width, 0)      ///1.横向渐变
                gradient: Gradient {
                    GradientStop {  position: 0.0;    color: "white" }
                    GradientStop {  position: 1.0;    color: sColor }
                }
            }
            MouseArea{
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onReleased: {
                    var mousePos = mapToItem(sSlider, mouseX, mouseY)
                    sSlider.posi = mousePos.x / pannelSize
                    sSlider.posi = Math.max(0, sSlider.posi)
                    sSlider.posi = Math.min(1, sSlider.posi)
                    updateColor()
                }onPositionChanged: {
                    var mousePos = mapToItem(sSlider, mouseX, mouseY)
                    sSlider.posi = mousePos.x / pannelSize
                    sSlider.posi = Math.max(0, sSlider.posi)
                    sSlider.posi = Math.min(1, sSlider.posi)
                    updateColor()
                }
            }
            Rectangle{
                height: sliderHeight + 4*dp
                width: 5*dp
                y: -2*dp; x: sSlider.posi*pannelSize - 2
                border.color: "#CCCCCC"
            }
        }

        Rectangle{
            id: vSlider
            height: sliderHeight
            width: pannelSize
            property real posi: 1
            LinearGradient {            ///--[Mark]
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(width, 0)      ///1.横向渐变
                gradient: Gradient {
                    GradientStop {  position: 0.0;    color: "black" }
                    GradientStop {  position: 1.0;    color: vColor }
                }

            }
            MouseArea{
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onReleased: {
                    var mousePos = mapToItem(vSlider, mouseX, mouseY)
                    vSlider.posi = mousePos.x / pannelSize
                    vSlider.posi = Math.max(0, vSlider.posi)
                    vSlider.posi = Math.min(1, vSlider.posi)
                    updateColor()
                }onPositionChanged: {
                    var mousePos = mapToItem(vSlider, mouseX, mouseY)
                    vSlider.posi = mousePos.x / pannelSize
                    vSlider.posi = Math.max(0, vSlider.posi)
                    vSlider.posi = Math.min(1, vSlider.posi)
                    updateColor()
                }
            }
            Rectangle{
                height: sliderHeight + 4*dp
                width: 5*dp
                y: -2*dp; x: vSlider.posi*pannelSize - 2
                border.color: "#CCCCCC"
            }
        }

    }
}
